<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
  <link rel="stylesheet" href="/js/jquery/ui/jquery-ui.css" th:href=@{/js/jquery/ui/jquery-ui.css} />
  <script type="text/javascript" src="/js/jquery/jquery-3.4.1.min.js"  th:href=@{/js/jquery/jquery-3.4.1.min.js}></script>
  <script type="text/javascript" src="/js/jquery/ui/jquery-ui.js"  th:href=@{/js/jquery/ui/jquery-ui.js}></script>
  <script type="text/javascript" src="/js/echarts/echarts.min.js"  th:href=@{/js/echarts/echarts.min.js}></script>
</head>
<body>
   <form action="/line">
   <p th:text="'Hello, ' + ${stockId} + '!'" />
   <p>
   <select id="stockSelectId" name="stockId"  >
       <option value="sh600004">sh600004</option>  
       <option value="sh600000">sh600000</option> 
       <option value="sh600006">sh600006</option>   
   </select>
    日期： <input type="text" id="datepicker" name="dataDate"> 
     <input type="submit" value="查询"></p>
    </form>
   <div id="box" style="width: 600px;height:400px;"></div>
   <table border="1">  
        <tr>  
          <th>股票名称</th>  
          <th>净值</th>  
          <th>时间</th>  
        </tr>  
        <tr  th:each="stock : ${stockList}">  
          <td th:each="value : ${stock}">
                <p th:text="${value}"></p>
          </td>  
         </tr>  
     </table>  
  
         
    
</body>
<script th:inline="javascript">
$(document).ready(function(){
	$("#stockSelectId").val([[${stockId}]]);
	
	$( "#datepicker" ).datepicker({
		dateFormat : "yy-mm-dd" 
	});
	$( "#datepicker" ).val([[${dataDate}]]);
 
	
	 var chartContainer = document.getElementById("box");
	 var myChart = echarts.init(chartContainer);
	 $.ajax({  
		type: "POST",  
		url: "/getLineData",
		data: {stockId:"sh600006",dataDate:""},
		success: function(data){
			var xdata=new Array();
			var seriesdata=new Array();
		    $.each(data,function(item,value){
		    	xdata.push(value[2]);
		    	seriesdata.push(value[1]);
		    });
		    
		    var option = {					
		    		tooltip: {
				        show: true
			        },
		    	    xAxis: {
		    	        type: 'category',
		    	        data: xdata
		    	    },
		    	    yAxis: {
		    	        type: 'value'
		    	    },
		    	    series: [{
		    	        data: seriesdata,
		    	        type: 'line',
		    	        smooth: true
		    	    }]
		    	};
		    
		    myChart.setOption(option);
         },
        error:function(e){
            console.log(e);
         }
	});
});
   function changeStock(){
	   var stockId=$("#stockSelectId").val();
	   window.location.href="http://localhost:8080/line?stockId="+stockId;
   }

</script>

</html>